<template>
	<view>
		<u-modal v-if="providers.length>1" v-model:value="value" @confirm="close" ref="uModal" confirm-text="取消" :show-title="false" :async-close="true">
			<view class="px6 pt6">
				<view class="fs34 fwb pb6 c3 tac">请选择您的支付方式</view>
				<view class="fac py6" :class="{'bt': i > 0}" v-for="(item, i) in providers" :key="item.id" @click="pay(i)">
					<u-icon v-if="item.id!=='remit'" size="50" :name="item.icon" :color="item.color" />
					<text v-else class="icon fs42 c3">{{item.icon}}</text>
					<view class="f1 ml6">{{item.name}}</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>
<script>
import util from '@/utils/util'
// #ifdef H5-WEIXIN
import wechat from '@/utils/wechat'
// #endif

const providers = [{
	name: '微信支付',
	id: 'wepay',
	icon: 'weixin-fill',
	color: '#6BCC03',
	loading: false
},{
	name: '支付宝',
	id: 'alipay',
	icon: 'zhifubao',
	color: '#06B4FD',
	loading: false
},{
	name: '上传银行转账凭证',
	id: 'remit',
	icon: '\ue6b0',
	color: '#666666',
	loading: false
}];

export default {
	props: {
		no: {
			type: [String, Number],
			require: true
		},
		value: {
			type: Boolean,
			default: false
		},
		types: {
			type: Array,
			default: () => ['alipay', 'wepay', 'remit']
		},
		back: {
			type: Boolean,
			default: true
		}
	},
	data () {
		return {
			loading: false,
			index: 0,
			providers: []
		}
	},
	mounted () {
		// #ifdef APP-PLUS
		uni.getProvider({
			service: 'payment',
			success(e){
				this.providers = providers.filter(r => this.types.includes(r.id))
			},
			fail(e){}
		})
		// #endif
		// #ifdef H5
		// #ifndef H5-WEIXIN
		this.providers = providers.filter(r => this.types.includes(r.id))
		// #endif
		// #endif
		// #ifdef MP-WEIXIN
		this.providers = providers.filter(r => this.types.includes(r.id) && ['wepay','remit'].includes(r.id))
		// #endif
	},
	methods: {
		pay (i=0) {
			this.index=i
			this.$emit('update:value', false)
			const type = this.providers[i].id
			if(type==='remit'){
				if(this.back){
					util.navto('mch/remit/account', { id: this.no })
				} else {
					util.rdrto('mch/remit/account', { id: this.no })
				}
				return
			}
			const that = this
			uni.showLoading({ title: '支付调取中' })
			// #ifdef MP-WEIXIN
			uni.$u.http.get('' + type + '/mini', {id: this.no}).then(res => {
				uni.hideLoading()
				uni.requestPayment({
					timeStamp: res.timeStamp,
					nonceStr: res.nonceStr,
					package: res.package,
					signType: res.signType,
					paySign: res.paySign,
					success(res){
						that.$emit('success', that.no)
					},
					fail(res){
						that.$emit('fail', that.no)
					}
				}).catch(()=>{})
			// #endif
			// #ifdef H5-WEIXIN
			uni.$u.http.get('' + type + '/wechat', {id: this.no}).then(res => {
				wechat.pay(res, this.no, () => this.$emit('success', this.no)
			// #endif
			// #ifdef H5
			// #ifndef H5-WEIXIN
			// WAP支付
			uni.$u.http.get('' + type + '/wap', {id: this.no}).then(res => {
				location.href = res.url
			// #endif
			// #endif
			// #ifdef APP-PLUS
			uni.$u.http.get('' + type + '/app', {id: this.no}).then(res => {
				uni.hideLoading()
				uni.requestPayment({
					provider: e.id,
					orderInfo: res.data,
					success(e){
						that.$emit('success', that.no)
					},
					fail(e){
						that.$u.toast("支付失败,原因为: " + e.errMsg)
					}
				})
				// #endif
			}).catch(()=>{})
		},
		close(){
			this.$refs.uModal.clearLoading()
			this.$emit('fail', this.no)
			this.$emit('update:value', false)
		},
		repay(){
			this.pay(this.index)
		}
	},
	watch: {
		value(newVal, oldVal){
			if(newVal && !oldVal){
				// #ifdef MP || H5-WEIXIN
				(this.providers.length<=1) && this.pay()
				// #endif
			}
		}
	}
}
</script>